<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${basePath!}/static/layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <link rel="stylesheet" href="${basePath!}/static/css/form.css"  media="all">
</head>
<body>
<div class="layui-btn-group" style="margin-top: 2px;">
    <button class="layui-btn" id="add">录入</button>
    <button class="layui-btn" id="edit">编辑</button>
    <button class="layui-btn" id="delete">删除</button>
</div>
<table class="layui-hide" id="custom" lay-filter="customFilter" style="margin-left: 5px;"></table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="visit">拜访记录</a>
</script>
<script src="${basePath!}/static/js/jquery.min.js" type="text/javascript"></script>
<script src="${basePath!}/static/layui/layui.js"  charset="utf-8" type="text/javascript"></script>
<script src="${basePath!}/static/js/utils.js"  charset="utf-8" type="text/javascript"></script>
<script>
    var customId;
    var companyId;
    layui.use('table', function(){
        initSelect('companyId','${basePath!}/company/selectAll','id','companyName');
        layui.form.render('select','customFilter');

        //监听工具条
        layui.table.on('tool(customFilter)', function(obj){
             if(obj.event === 'visit'){
                layer.open({
                    type: 2,
                    title:["拜访记录详情"],
                    area: ['100%', '100%'],
                    maxmin:true,
                    scrollbar: false ,
                    content:['visitTab','yes'],
                    success: function (layer, index) {
                        // 获取子页面的iframe
                        var iframe = window['layui-layer-iframe' + index];
                        // 向子页面的全局函数child传参
                        iframe.initPage(obj.data);
                    }
                });
            }
        });
    });

    function initPage(data) {
        companyId = data.id;
        var table = layui.table;
        table.render({
            elem: '#custom'
            ,url:'${basePath!}/custom/selectPageList?companyId='+data.id
            ,cols: [[
                {type:'checkbox'}
                ,{field:'id', title: 'ID', hide: true}
                ,{field:'customName', minWidth:100, title: '客户名称'}
                ,{field:'phone', minWidth:80, title: '联系电话'}
                ,{field:'email', minWidth:280, title: '邮箱'}
                ,{field:'job', minWidth: 60, title: '职位'}
//                ,{field:'level', minWidth:60, title: '级别'}
                ,{fixed: 'right', width:100, align:'center', toolbar: '#barDemo', title: '操作'}
            ]]
            ,page: true
        });
    }

    //添加按钮点击事件
    $("#add").click(function () {
        $("#reset").click();//重置表单(新建时在进入表单前要重置一下表单的内容，不然表单打开后会显示上一次的表单的内容。这里调用表单中重置按钮的点击方法来重置)
        $("#companyId").val(companyId);
        layerid=layer.open({//开启表单弹层
            skin: 'layui-layer-molv',
            area:'60%',
            type: 1,
            title:'新建客户',
            content: $('#custom_form_div') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
        });
    });

    $("#delete").click(function () {
        var data = layui.table.checkStatus('custom').data;
        if(data.length==0){
            layer.alert("先选择一条信息");
            return;
        }
        $.ajax({
            type: "DELETE",
            url: "${basePath!}/custom/deleteByIds?ids="+getIds(data),
            contentType: "application/json",
            dataType: "json",
            async: true,
            error: function (request) {
                layer.alert("与服务器连接失败/(ㄒoㄒ)/~~");
            },
            success: function (result) {
                layui.table.reload('custom');
                layer.alert("共删除"+data.length+"信息");
            }
        });
    });

    $("#edit").click(function () {
        var data = layui.table.checkStatus('custom').data;
        if(data.length==0){
            layer.alert("先选择一条信息");
            return;
        }
        if(data.length>1){
            layer.alert("至多只能选择一条信息编辑");
            return;
        }
        $.ajax({
            type: "GET",
            url:"${basePath!}/custom/selectByPrimaryKey?id="+data[0].id,
            async: true,
            error: function(request) {
                layer.alert("与服务器连接失败/(ㄒoㄒ)/~~");
            },
            success: function(result) {
                customId = result.data.id;
                if(result.status==false){
                    layer.alert(data.message);
                }
                if(result.status==true){
                    //向表单填充数据
                   layui.form.val("customFilter",result.data);
                    //开启编辑表单所在的弹层。注意编辑和新建的表单是一套模板
                    layerid=layer.open({
                        skin: 'layui-layer-molv',
                        area:'60%',
                        type: 1,
                        title:'编辑客户信息',
                        content: $('#custom_form_div') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                    });
                }
            }
        });
    });

    //保存信息
     function onSave() {
         if(customId){
             $("#id").val(customId);
         }
        $.ajax({
            type: "POST",
            url:"${basePath!}/custom/edit",
            data:$('#custom_form').serialize(),
            async: true,
            error: function(request) {
                layer.alert("与服务器连接失败/(ㄒoㄒ)/~~");
            },
            success: function(data) {
                if(data.status==false){
                    layer.alert(data.message);
                }
                if(data.status==true){
                    layer.open({
                        skin: 'layui-layer-molv',
                        type:1,
                        area:"10%",
                        content:data.message,
                        shadeClose:true,
                        end: function(){
                            layer.close(layerid);
                            layui.table.reload('custom');
                            $("#reset").click();//重置表单
                        }
                    });
                }
            }
        });
        return false;//防止表单提交后跳转
    }
</script>
<#--↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓add↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓-->
<#--带有 class="layui-fluid" 的容器中，那么宽度将不会固定，而是 100% 适应-->
<div id="custom_form_div" hidden="" class="layui-fluid" style="margin: 15px;">
    <form class="layui-form" lay-filter="customFilter" action="" id="custom_form">
        <input id="id" name="id" hidden/>
        <div class="layui-form-item">
            <label class="layui-form-label">所属公司</label>
            <div class="layui-input-block">
                <select name="companyId" id="companyId"></select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">客户名称</label>
            <div class="layui-input-block">
                <input type="text" id="customName" name="customName" lay-verify="required" autocomplete="off" placeholder="请输入客户名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">联系电话</label>
            <div class="layui-input-block">
                <input type="text" id="phone" name="phone" lay-verify="required" autocomplete="off" placeholder="请输入联系电话" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input type="text" id="email" name="email" autocomplete="off" placeholder="请输入客户邮箱" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">职位</label>
            <div class="layui-input-block">
                <input type="text" id="job" name="job" autocomplete="off" placeholder="请输入客户职位" class="layui-input">
            </div>
        </div>
        <#--<div class="layui-form-item">-->
            <#--<label class="layui-form-label">级别</label>-->
            <#--<div class="layui-input-block">-->
                <#--<input type="text" id="level" name="level" autocomplete="off" placeholder="请输入客户级别" class="layui-input">-->
            <#--</div>-->
        <#--</div>-->
        <div class="layui-form-item">
            <div style="text-align: center;">
                <button class="layui-btn" lay-submit="" onclick="onSave()">保存</button>
                <button id="reset" type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<#--↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑add↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑-->
</body>
</html>